<template>
  <view class="settings-page">
    <scroll-view class="content-scroll" scroll-y>
      <!-- 账户设置 -->
      <view class="settings-section">
        <text class="section-title">账户设置</text>
        <view class="settings-card">
          <u-cell-group :border="false">
            <u-cell title="个人资料" :isLink="true" @click="handleToProfile">
              <template #icon>
                <u-icon name="account" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
            </u-cell>
            <u-cell title="账户安全" :isLink="true" @click="handleToSecurity">
              <template #icon>
                <u-icon name="lock" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
            </u-cell>
            <u-cell title="实名认证" :isLink="true" @click="handleToVerify">
              <template #icon>
                <u-icon name="checkmark-circle" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <text class="verify-status">未认证</text>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>

      <!-- 通知设置 -->
      <view class="settings-section">
        <text class="section-title">通知设置</text>
        <view class="settings-card">
          <u-cell-group :border="false">
            <u-cell title="系统通知">
              <template #icon>
                <u-icon name="bell" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <u-switch v-model="notificationSettings.system" size="24" activeColor="#10b981" />
              </template>
            </u-cell>
            <u-cell title="服务消息">
              <template #icon>
                <u-icon name="bag" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <u-switch v-model="notificationSettings.service" size="24" activeColor="#10b981" />
              </template>
            </u-cell>
            <u-cell title="需求消息">
              <template #icon>
                <u-icon name="list" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <u-switch v-model="notificationSettings.demand" size="24" activeColor="#10b981" />
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>

      <!-- 其他设置 -->
      <view class="settings-section">
        <text class="section-title">其他</text>
        <view class="settings-card">
          <u-cell-group :border="false">
            <u-cell title="清除缓存" :isLink="true" @click="handleClearCache">
              <template #icon>
                <u-icon name="trash" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
              <template #value>
                <text class="cache-size">12.5MB</text>
              </template>
            </u-cell>
            <u-cell title="关于我们" :isLink="true" @click="handleToAbout">
              <template #icon>
                <u-icon name="info-circle" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
            </u-cell>
            <u-cell title="隐私政策" :isLink="true" @click="handleToPrivacy">
              <template #icon>
                <u-icon name="file-text" size="18" color="#10b981" style="margin-right: 12rpx;" />
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>

      <view class="safe-area-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const notificationSettings = ref({
  system: true,
  service: true,
  demand: true
})

const handleToProfile = () => {
  uni.navigateTo({ url: '/pages/yjyny/mine/profile' })
}

const handleToSecurity = () => {
  uni.navigateTo({ url: '/pages/yjyny/mine/security' })
}

const handleToVerify = () => {
  uni.showToast({ title: '实名认证功能开发中', icon: 'none' })
}

const handleClearCache = () => {
  uni.showModal({
    title: '清除缓存',
    content: '确定清除缓存吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '清除成功', icon: 'success' })
      }
    }
  })
}

const handleToAbout = () => {
  uni.navigateTo({ url: '/pages/yjyny/platform-intro/index' })
}

const handleToPrivacy = () => {
  uni.showToast({ title: '隐私政策页面开发中', icon: 'none' })
}

const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // TODO: 清除登录状态
        uni.showToast({ 
          title: '已退出登录', 
          icon: 'success',
          success: () => {
            setTimeout(() => {
              uni.reLaunch({ url: '/pages/index' })
            }, 1500)
          }
        })
      }
    }
  })
}
</script>

<style scoped lang="scss">
.settings-page {
  min-height: 100vh;
  background-color: #f9fafb;
}

.content-scroll {
  height: 100vh;
}

.settings-section {
  padding: 32rpx 24rpx 0;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 16rpx;
  padding-left: 8rpx;
}

.settings-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
}

.verify-status {
  font-size: 26rpx;
  color: var(--text-secondary);
}

.cache-size {
  font-size: 26rpx;
  color: var(--text-secondary);
}

.logout-section {
  padding: 48rpx 32rpx;
}

.logout-btn {
  width: 100%;
  padding: 28rpx;
  background-color: #ffffff;
  color: #ef4444;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 48rpx;
  border: 2rpx solid #ef4444;
}

.logout-btn:active {
  background-color: #fef2f2;
}

.safe-area-bottom {
  height: 40rpx;
}
</style>

